<template>
    <view>
        <!-- parse <template is="meetDetailTpl" :data="id,isLoad,skin,mainCur,showMind,showTime,tabCur,verticalNavTop,meet,beginDesc,endDesc,succDesc,limitDesc,cancelDesc,canNullTime,topShow"/> -->
        <block name="meetDetailTpl">
            <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
            <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

            <view v-if="isLoad" class="main">
                <view class="top-area">
                    <view class="top-title text-cut">{{ meet.MEET_TITLE }}</view>
                    <view class="top-menu">
                        <view @tap="bindShowMindTap" :class="'item ' + (showMind ? 'cur text-project' : '')">
                            <text class="icon-friend margin-right-xxs"></text>
                            {{ skin.MEET_NAME }}须知
                        </view>
                        <view @tap="bindShowTimeTap" :class="'item ' + (showTime ? 'cur text-project' : '')">
                            <text class="icon-remind margin-right-xxs"></text>
                            可预约时段
                        </view>
                    </view>
                </view>

                <view class="big-box">
                    <block v-if="showMind">
                        <view class="article-box padding-project">
                            <view class="article card-project shadow-project margin-top" v-if="meet.MEET_CONTENT && meet.MEET_CONTENT.length > 0">
                                <block v-for="(item, index) in meet.MEET_CONTENT" :key="index">
                                    <view class="content" v-if="item.type == 'text'">
                                        <text :user-select="true">{{ item.val }}</text>
                                    </view>

                                    <view class="pics" v-if="item.type == 'img'">
                                        <image
                                            @tap="url"
                                            data-type="img"
                                            :data-url="item.val"
                                            :show-menu-by-longpress="true"
                                            class="loading"
                                            mode="widthFix"
                                            :lazy-load="true"
                                            :src="item.val"
                                        ></image>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </block>

                    <block v-if="showTime">
                        <view v-if="!meet.MEET_DAYS_SET || meet.MEET_DAYS_SET.length == 0" class="meet-no-time text-grey">
                            <text class="icon-emoji"></text>
                            <view>暂无可预约时段，请选择其他</view>
                        </view>

                        <view v-if="meet.MEET_DAYS_SET && meet.MEET_DAYS_SET.length > 0" class="vertical-box">
                            <!-- left begin -->
                            <scroll-view class="vertical-nav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height: calc(100vh - 193rpx)">
                                <view
                                    :class="'item text-cut  ' + (index == tabCur ? 'cur text-project' : '')"
                                    @tap="bindTabSelectTap"
                                    :data-idx="index"
                                    v-if="item.times.length > 0 || canNullTime"
                                    v-for="(item, index) in meet.MEET_DAYS_SET"
                                    :key="index"
                                >
                                    {{ item.day }}
                                </view>
                            </scroll-view>
                            <!-- left END -->

                            <!-- right begin -->
                            <scroll-view
                                class="vertical-main"
                                scroll-y
                                scroll-with-animation
                                style="height: calc(100vh - 193rpx)"
                                :scroll-into-view="'main-' + mainCur"
                                @scroll="bindVerticalMainScroll"
                            >
                                <view
                                    class="vertical-main-box"
                                    v-if="item.times.length > 0 || canNullTime"
                                    :id="'main-' + index"
                                    v-for="(item, index) in meet.MEET_DAYS_SET"
                                    :key="index"
                                >
                                    <view class="bar solid-bottom bg-white righ-tab-bar">
                                        <view class="action right-tab-tilte text-black">
                                            {{ item.dayDesc }}
                                        </view>
                                    </view>

                                    <!-- 时段列表 begin -->

                                    <view class="text-list">
                                        <view class="item text-grey" v-if="item.times.length == 0 && canNullTime">暂无可预约时段</view>

                                        <view class="item" @tap="bindJoinTap" :data-dayidx="index" :data-timeidx="idx" v-for="(itm, idx) in item.times" :key="idx">
                                            <view :class="'time-text limit ' + (itm.error ? 'error' : '')">
                                                <text>{{ itm.start }}～{{ itm.end }}</text>
                                                <block v-if="!itm.error">
                                                    <text v-if="meet.MEET_IS_SHOW_LIMIT == 1 && itm.isLimit" class="limit-text">
                                                        ({{ itm.stat.succCnt }}
                                                        <text style="margin: 0 5rpx">/</text>
                                                        {{ itm.limit }})
                                                    </text>
                                                    <text v-if="meet.MEET_IS_SHOW_LIMIT == 1 && !itm.isLimit" class="limit-text">(人数不限)</text>
                                                    <text v-if="meet.MEET_IS_SHOW_LIMIT == 0" class="limit-text">(可预约)</text>
                                                </block>
                                                <block v-else>
                                                    <text class="limit-text">({{ itm.error }})</text>
                                                </block>
                                            </view>
                                        </view>
                                    </view>

                                    <!-- 时段列表 END -->
                                </view>
                            </scroll-view>
                            <!-- right END -->
                        </view>
                    </block>
                </view>
            </view>

            <!-- top begin -->
            <button v-if="topShow" class="btn-fixed bg-gray text-gray btn-top" @tap="bindTopTap" style="bottom: 60rpx"><text class="icon-top"></text></button>
            <!-- top END. -->
        </block>
    </view>
</template>

<script>
let behavior = require('../../../../behavior/meet_detail_bh.js');
let PassortBiz = require('../../../../biz/passport_biz.js');
let skin = require('../../skin/skin.js');
export default {
    data() {
        return {
            isLoad: '',

            meet: {
                MEET_TITLE: '',
                MEET_CONTENT: '',
                MEET_DAYS_SET: '',
                MEET_IS_SHOW_LIMIT: 0
            },

            showMind: false,
            showTime: false,
            verticalNavTop: 0,
            tabCur: '',
            canNullTime: '',
            mainCur: '',

            itm: {
                error: false,
                start: '',
                end: '',
                isLimit: ''
            },

            topShow: 0
        };
    },
    mixins: [behavior],
    onReady: function () {
        PassortBiz.initPage({
            skin,
            that: this,
            isLoadSkin: true
        });
        uni.setNavigationBarTitle({
            title: skin.MEET_NAME + '详情'
        });
    },
    methods: {
        bindShowMindTap() {
            console.log('占位：函数 bindShowMindTap 未声明');
        },

        bindShowTimeTap() {
            console.log('占位：函数 bindShowTimeTap 未声明');
        },

        url() {
            console.log('占位：函数 url 未声明');
        },

        bindTabSelectTap() {
            console.log('占位：函数 bindTabSelectTap 未声明');
        },

        bindVerticalMainScroll() {
            console.log('占位：函数 bindVerticalMainScroll 未声明');
        },

        bindJoinTap() {
            console.log('占位：函数 bindJoinTap 未声明');
        },

        bindTopTap() {
            console.log('占位：函数 bindTopTap 未声明');
        }
    }
};
</script>
<style>
@import './meet_detail.css';
@import 'undefined';
</style>
